import { createApp } from 'vue'
import 'default-passive-events'
import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css'
import '@/assets/styles/index.css'
import '@/assets/element/index.scss'
import '@/assets/styles/base/index.scss'
import router from '@/router/index'
import App from './App.vue'
import VueLazyLoad from 'vue3-lazyload'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'
import registerGlobalDirectives from '@/utils/registerGlobalDirectives'

const pinia = createPinia()
pinia.use(piniaPersist).use(({ store }) => {
  const initialState = JSON.parse(JSON.stringify(store.$state))
  store.$reset = () => {
    store.$patch(initialState)
  }
})
const app = createApp(App)
registerGlobalDirectives(app)
app.use(router).use(pinia).use(VueLazyLoad, {}).use(ElementPlus).mount('#app')

const initFontSize = () => {
  const width = document.body.clientWidth
  const ratio = (width * 0.625) / 1920
  document.body.style.fontSize = ratio * 100 + '%'
}
window.onload = () => {
  initFontSize()
}
window.addEventListener('resize', initFontSize, { passive: false })
